<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <script src="js/vue.js"></script>   <!--引入vue.js文件-->
    <script src="element-ui/lib/index.js"></script>   <!--引入组件库-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">  <!--引入样式库-->
    <script src="js/axios-0.18.0.js"></script>
    <title>注册登录界面</title>
    <link rel="stylesheet" href="css/81.css">
    <style>
        .el-select .el-input {
            width: 130px;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }
        .el-input-group--append .el-input__inner, .el-input-group__prepend {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            background-color: rgb(211, 183, 216);
        }
    </style>
</head>

<body>
<div id="app">
    <div class="container">
        <div class="form-box">
            <!-- 注册 -->
            <div class="register-box hidden">
                <h1>注册</h1>
                <input type="text" placeholder="用户名" v-model="information.name">
                <input type="text" placeholder="QQ号" v-model="information.phone">
                <input type="password" placeholder="密码" v-model="information.password">
                <input type="password" placeholder="确认密码" v-model="again">
                <el-button @click="startCountdown" :disabled="isCountingDown" style="height: 40px;width: 150px;margin:0">
                    {{ buttonText }}
                </el-button>
                <input type="text" placeholder="输入验证码" v-model="inputyzm">

                <button @click="register">注册</button>
            </div>
            <!-- 登录 -->
            <!-- 登录 -->
            <div class="login-box">
                <h1>登录</h1>
                <input type="text" placeholder="用户名" v-model="login.name">
                <input type="password" placeholder="密码" v-model="login.password">
                <!-- 图形验证码 -->
                <img id="captchaImg" :src="captchaSrc" @click="refreshCaptcha" />
                <input type="text" id="captchaInput" v-model="login.captcha" placeholder="请输入验证码" required />
                <!-- 记住密码 -->
                <input type="checkbox" id="rememberMe" v-model="login.rememberMe" />
                <label for="rememberMe">记住密码</label>
                <button @click="loginnew">登录</button>
            </div>

        </div>
        <div class="con-box left">
            <h2>欢迎来到<span>火苗论坛</span></h2>
            <p>快加入有趣的<span>论坛群</span>吧</p>
            <img src="logo/logo.png" alt="QR Code" />
            <p>已有账号</p>
            <button id="login">去登录</button>
        </div>
        <div class="con-box right">
            <h2>欢迎来到<span>火苗论坛</span></h2>
            <p>快加入有趣的<span>论坛群</span>吧</p>
            <img src="logo/logo.png" alt="">
            <p>没有账号？</p>
            <button id="register">去注册</button>
        </div>
    </div>

    <div style="position: absolute;top: 10px;right: 10px">
        <el-button type="primary" plain @click="goBack">以游客方式进入</el-button>
    </div>
</div>

<script>
    new Vue({
        el:'#app',
        mounted(){
            this.registerButton = document.getElementById('register');
            this.loginButton = document.getElementById('login');
            this.formBox = document.getElementsByClassName('form-box')[0];
            this.registerBox = document.getElementsByClassName('register-box')[0];
            this.loginBox = document.getElementsByClassName('login-box')[0];

            // 绑定点击事件到Vue实例的方法
            this.registerButton.addEventListener('click', this.showRegisterBox);
            this.loginButton.addEventListener('click', this.showLoginBox);
            this.getAllUsers();
        },
        data:{
            information:{
                name:'',
                phone:'',
                password:'',
            },  //注册的所有信息
            login: {
                name: '',
                password: '',
                captcha: '',
                rememberMe: false
            },
            captchaSrc: 'users/captcha?' + Math.random(),
            again: '',
            timeLeft: 3, //3s倒计时跳转页面
            tableData: [],
            //验证码
            inputyzm:'',
            buttonText: '点击获取验证码',
            isCountingDown: false,
            countdownTime: 30,
            interval: null,
            emailnumber:'&&*&!#jkdahwkj',

        },
        methods:{
            showRegisterBox() {
                this.formBox.style.transform = 'translateX(80%)';
                this.loginBox.classList.add('hidden');
                this.registerBox.classList.remove('hidden');
            },
            showLoginBox() {
                this.formBox.style.transform = 'translateX(0%)';
                this.registerBox.classList.add('hidden');
                this.loginBox.classList.remove('hidden');
            },
            //拓展部分
            getAllUsers(){
                axios.get("users/getAllUsers").then(x=>{
                    this.tableData = x.data;
                    console.log(localStorage.getItem('savedUsername')+"save")
                    console.log()
                    console.log()
                    // 当页面加载时，尝试从localStorage中获取保存的密码
                    if (localStorage.getItem('savedUsername')) {
                        this.login.name = localStorage.getItem('savedUsername');
                        this.login.password = localStorage.getItem('savedPassword');
                        this.login.rememberMe = true;
                    }
                })
            },
            more(val){
                axios.get("users/more",{params:{uid:val}}).then(x=>{

                })
            },
            //注册
            register() {
                // 这里添加注册逻辑
                if (this.information.password === this.again) {
                    // 密码匹配，可以进行下一步操作
                    console.log('注册信息：', this.information+this.emailnumber);
                    // 发送注册请求...
                    if (this.emailnumber == this.inputyzm){
                        axios.get("users/register",{params:{name:this.information.name,phone:this.information.phone,password:this.information.password}}).then(x=>{
                            this.more(this.tableData[this.tableData.length - 1 ].uid + 1)
                            this.$message({
                                message: '恭喜你，注册成功，请前往登录！',
                                type: 'success'
                            });
                            const countdownInterval = setInterval(() =>{
                                if (this.timeLeft > 0){
                                    this.timeLeft --;
                                }else{
                                    clearInterval(countdownInterval);
                                    window.location.reload();
                                }
                            },2000) ; //每秒执行一次
                        })
                    }else{
                        this.$message({
                            message: '验证码错误',
                            type: 'warning'
                        });
                    }

                } else {
                    this.$message.error('两次输入的密码不匹配！');
                }
            },
            loginnew() {
                if (this.login.name =='admin'  && this.login.password == 'admin'  ){
                    window.location.href = `tb_index.html`;
                    return;
                }
                // 这里添加登录逻辑
                // console.log('登录信息：'+this.login + this.login.captcha+this.login.rememberMe +this.captchaSrc);
                // 发送登录请求...
                axios.get("users/login",{params: {name:this.login.name,password:this.login.password,captcha:this.login.captcha}}).then(x=>{
                    // 在用户登录后设置Cookie
                    if (x.data.name !=null && x.data.password !=null){
                        document.cookie = "name=" + x.data.name + "; path=/";
                        document.cookie = "password=" + x.data.password + "; path=/";
                        // 如果勾选了“记住密码”，则保存到localStorage中
                        if (this.login.rememberMe) {
                            localStorage.setItem('savedUsername', this.login.name);
                            localStorage.setItem('savedPassword', this.login.password);
                        } else {
                            localStorage.removeItem('savedUsername');
                            localStorage.removeItem('savedPassword');
                        }
                        this.$message({
                            message: '恭喜你，登录成功！',
                            type: 'success'
                        });
                        const countdownInterval = setInterval(() =>{
                            if (this.timeLeft > 0){
                                this.timeLeft --;
                            }else{
                                clearInterval(countdownInterval);
                                window.location.href = 'index.html';
                            }
                        },1000) ; //每秒执行一次
                    }else{
                        this.$message({
                            message: '用户名或密码或验证码错误！',
                            type: 'warning'
                        });
                        this.refreshCaptcha(); // 刷新验证码
                    }
                })
            },
            //验证码和记住密码
            refreshCaptcha() {
                this.captchaSrc = 'users/captcha?' + Math.random();
            },

            //验证码
            startCountdown() {
                if (this.information.phone){
                    if (this.isCountingDown) return;

                    //邮件发送
                    var max = 999999;
                    var min = 100000;
                    this.emailnumber = Math.floor(Math.random()*(max - min + 1)) +min;
                    setTimeout(()=>{
                        this.emailnumber = '&&*&!#jkdahwkj';
                    },30000)
                    console.log(this.emailnumber+":"+this.information.phone);
                    var email = this.information.phone + "@qq.com";
                    axios.get("email/send",{params:{email:email,text:this.emailnumber}}).then(x=>{
                        this.$message({
                            message: '注意好QQ邮箱',
                            type: 'success'
                        });

                    }).catch(x =>{
                        this.$message({
                            showClose: true,
                            message: 'QQ格式有问题',
                            type: 'error'
                        });
                    })
                    this.isCountingDown = true;
                    this.buttonText = `${this.countdownTime}秒`;
                    this.interval = setInterval(() => {
                        this.countdownTime--;
                        this.buttonText = `${this.countdownTime}秒`;

                        if (this.countdownTime <= 0) {
                            clearInterval(this.interval);
                            this.resetButton();
                        }
                    }, 1000);
                }else {
                    this.$message({
                        message: '请先输入QQ号！',
                        type: 'warning'
                    });
                }

            },
            resetButton() {
                this.countdownTime = 30;
                this.isCountingDown = false;
                this.buttonText = '点击获取验证码';
            },
            goBack(){
                // 返回到index.html页面
                window.location.href = `index.html`;
            },



        },

    })
</script>
</body>

</html>